<template>
	<div class="dialog-wrapper" v-if="ifImg">
      <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="30%"
        :show-close="false"
        custom-class="elDialog"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
      >
      <!--点击图片时跳转-->
        <img src="./img/01hongbao.png" @click="linkImg" />
        <div class="el-close">
          <i class="el-icon-error" @click="dialogVisible = false"></i>
        </div>
      </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
              // 判断有没有宣传图
              ifImg: false,
              //图片路径
              indexImg: "",
              //点击红包时跳转路径
              indexro: "/mine",
              // 控制红包的
              dialogVisible: false,
              	}
            },
	created(){
		this.getImage();
	},
	methods: {
	    // 点击宣传图片跳转页面
	    linkImg() {
	      window.open(this.indexro, "_blank"); // 新窗口打开外链接
	    },
	    getImage() {
	    	//判断sessionStorage是否含有userfirst，若为null，则第一次打开该页面，可以向后台发送请求，获取图片
	      if (window.sessionStorage.getItem("userfirst") == null) {
	        // this.getJSON("后端接口地址").then((res) => {
	        //返回的为数组，若为空的话，是后端未设置该功能
	        //   if (res.data.length > 0) {
	          //isEnable根据后台数据判断是否需要展示弹出红包
	            // if (res.data[0].isEnable) {
	            //在sessionStorage中存储会话级别的userfirst
	              window.sessionStorage.setItem("userfirst", 0);
	              //显示红包弹框
	              this.dialogVisible = true;
	              //显示el-dialog弹框
	              this.ifImg = true;
	              //给参数赋值
	            //   this.indexImg = res.data[0].picture;
	            //   this.indexro = res.data[0].link;
	            } else {
	                this.ifImg = false;
	            }
	    },
	    // 点击红包
	    handleClose() {
	      this.dialogVisible = false;
	    },
	    //发送请求
	    getJSON(url) {
		  return new Promise((resolve, reject) => {
		    var xhr = new XMLHttpRequest();
		    xhr.open("GET", url, true);
		    xhr.setRequestHeader("Content-type", "application/json");
		    xhr.onreadystatechange = function () {
		      if (this.readyState === 4) {
		        if (this.status === 200) {
		          resolve(JSON.parse(this.responseText), this);
		        } else {
		          let resJson = { code: this.status, response: this.response };
		          reject(resJson, this);
		        }
		      }
		    };
		    xhr.send();
		  });
		}
	  }
    }
 
</script>

<style>
.el-dialog__body{
    position: relative;
        /* height: 10vh; */
        /* margin-top: -25vh;
        margin-left: -13vh; */
}
.el-dialog__header {
        /* display: none; */
      }
</style>
<style scoped lang="scss">
/*修改element中el-dialog自带的默认属性*/
.dialog-wrapper {
  margin-top: 0;
.el-dialog__wrapper {
    display: flex;
    align-items: center;
.el-dialog {
      margin: 0 auto   !important;;
      background-color: rgba(0, 0, 0, 0) !important;
      box-shadow:0 0 0 0;
.el-dialog__body {
        padding: 0px;
        /*去掉默认背景色*/
      	background-color: rgba(0, 0, 0, 0) !important;
        box-sizing: border-box;
      }
    }
  }
}
// .elDialog {
//   height: 100%;
// }
img {
    width: 80vw;
    height: 45vh;
     position: absolute;
        padding: 0;
        left: -24vw;
        top: -20vh;
    border-radius: 20px;
}
  img:hover{
    cursor:pointer;
  }
  .el-close {
    position: absolute;
    width: 5vw;
    height: 5vh;
    top: -30vh;
    right: -30vw;
    font-size: 5vh;
    text-align: center;
    line-height: 80px;
    color: rgb(165, 142, 142);
  }
</style>